const path = require('path')
const fs = require('fs')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const resolve = dir => {
  return path.join(__dirname, dir)
}
// cdn预加载使用
const externals = {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'axios': 'axios',
  'js-cookie': 'Cookies',
  // "iview": "iView"
}

const cdn = {
  css: [ 'https://unpkg.com/iview/dist/styles/iview.css' ],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.min.js',
      'https://unpkg.com/vue-router@3.0.2/dist/vue-router.min.js',
      'https://unpkg.com/vuex@3.1.0/dist/vuex.min.js',
      'https://unpkg.com/axios/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js',
      // 'https://unpkg.com/iview/dist/iview.min.js',
    ]
}
// 是否使用gzip
const productionGzip = true
// 需要gzip压缩的文件后缀
const productionGzipExtensions = ['js', 'css']

const env = process.env.NODE_ENV || 'development'
const isProduction = process.env.NODE_ENV === 'production';
fs.writeFileSync(
  path.join(__dirname, './config/env.js'),
  `export default '${env}'`
)

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
const BASE_URL = env === 'development' ? '/' : '/' // 生产环境下本地调试时使用'/'，线上部署应使用线上路径

const config = {

  devServer: {
    host: '0.0.0.0',
    port: 8001,
    open: true,
    // hot: true
    // https: true,
    // proxy: {
    //   '/proxy': {
    //     target: 'http://47.94.138.75',
    //     // changeOrigin: true,
    //     pathRewrite: {
    //       '^/proxy': ''
    //     }
    //   }
    // }
  },
  outputDir: './public/dist',
  publicPath: BASE_URL,
  assetsDir: './', // 静态资源目录
  configureWebpack: config => {
    const myConfig = {}
    if (env === 'production') {
      config.optimization.splitChunks.cacheGroups = {
        'vender-base': {
          name: 'vender-base',
          test: 'vender-base',
          chunks: 'all'
        },
        'vender-exten': {
          name: 'vender-exten',
          test: 'vender-exten',
          chunks: 'all'
        }
      }
      // 1. 生产环境npm包转CDN
      myConfig.externals = externals

      myConfig.plugins = []
      //构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
      productionGzip && myConfig.plugins.push(
        new CompressionWebpackPlugin({
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 8192,
          minRatio: 0.8
        })
      )
      myConfig.performance = {
        hints:false
      }
      myConfig.optimization = {
        minimizer: [
          new UglifyJsPlugin({
            test: /\.js(\?.*)?$/i,
            include: /\/includes/,
            exclude: /\/excludes/,
            cache: true,
            parallel: true,
            sourceMap: true,
            uglifyOptions: {
              warnings: false,
              mangle: true, // Note `mangle.properties` is `false` by default.
              toplevel: false,
              ie8: false,
              keep_fnames: false
            }
          })
        ]
      }
    }
    return myConfig
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
      .set('_conf', resolve('config'))
      .set('_static', resolve('static'))
      .set('_api', resolve('src/api'))
    config.plugin('html').tap(args => {
      args[0].favicon = resolve('public/favicon.ico')
      args[0].chunksSortMode = 'none'
      if (isProduction) {  args[0].cdn = cdn } //添加CDN参数到htmlWebpackPlugin配置中
      return args
    })
    if (env === 'production') { // 生产环境下代码拆分打包
      config.entry('vender-base').add(resolve('src/vendors/vendors.base.js')).end()
      config.entry('vender-exten').add(resolve('src/vendors/vendors.exten.js')).end()
    }
    config.module
    .rule('vue')
    .use('vue-loader') // 修改 Loader 选项
      .loader('vue-loader')
      .tap(options => {
        options.loaders = { less: 'vue-style-loader!css-loader!less-loader'}
        return options
    })
  },
  css: {
    sourceMap: env === 'development',
    loaderOptions: { // 向 CSS 相关的 loader 传递选项
      less: {
        javascriptEnabled: true
      }
    }

  },
  // 打包时不生成.map文件
  productionSourceMap: false,
  // 关闭ESLINT
  lintOnSave: false
}

module.exports = config